﻿<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>HTML5 地理定位</title>
<style>
    .example-7-color-preview {
        display: inline-block;
        width: 50px;
        height: 50px;
    }
</style>

    </head>
    <body class="docs">
    HTML5 地理定位<br />
https://www.w3school.com.cn/html5/html_5_geolocation.asp<br />
    <div id="demo"></div>
	<br /><br />
	<input type="button" id="geolocation" name="geolocation" value="geolocation" onclick="getLocation()" />
	<br /><br />
    </body>

<script type="text/javascript">
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition,showError);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
	console.log(position);
    x.innerHTML = "Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
}

function showError(error) {
	console.log(error);
    switch (error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}
</script>

</html>
